<template>
  <div class="double-content">
    <div class="double-nav">
      <ul>
        <li><a href="#bir1">数码专区</a></li>
        <li><a href="#gif1">送礼榜单</a></li>
        <li><a href="#sel1">热销榜单</a></li>
        <li>免费抽奖</li>
      </ul>
    </div>
    <div class="middle-img">
      <img
        src="https://hshop.honorfile.com/shopdc/pic/2022113/2/44360038-cad1-4a6d-af1e-478f3d3e2c49.webp?https://hshop.honorfile.com/shopdc/pic/2022113/0/44360038-cad1-4a6d-af1e-478f3d3e2c49.png"
        alt=""
      />
    </div>
    <div class="pic-list">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(v,index) in piclist" :key="index" class="img-box">
          <img :src="v.src" alt="">
          <img :src="v.src" alt="">
          <img :src="v.src" alt="">
          <img :src="v.src" alt="">
          <p class="pic-name">{{v.name}}</p>
          <p class="pic-sell">{{v.sell}}</p>
          </van-swipe-item>
        </van-swipe>
    </div>

    <div class="bottom-img">
        <img src="https://hshop.honorfile.com/shopdc/pic/2022113/2/9ff6a980-9146-4050-a062-cddd4669726f.webp?https://hshop.honorfile.com/shopdc/pic/2022113/0/9ff6a980-9146-4050-a062-cddd4669726f.png" alt="">
    </div>
    <div class="doublue-middle-pic">
        <img src="https://hshop.honorfile.com/shopdc/pic/2022113/2/0fe88601-0efe-4a48-b6be-fdc35608c447.webp?https://hshop.honorfile.com/shopdc/pic/2022113/0/0fe88601-0efe-4a48-b6be-fdc35608c447.png" alt="">
    </div>
    <div class="sell-list">
        <div class="mobileMod19-coupons">
          <img src="https://hshop.honorfile.com/shopdc/pic/2022113/0/116521a6-3233-4c85-9799-5e7840e8c8b8.png?https://hshop.honorfile.com/shopdc/pic/2022113/0/116521a6-3233-4c85-9799-5e7840e8c8b8.png" alt="">
        </div>
        <div class="pic-wrap">
          <img src="https://hshop.honorfile.com/shopdc/pic/2022113/0/b1a52592-4f16-4601-a8dd-1e348792e720.png" alt="">
        </div>
        <div class="J_anchors">
          <img src="https://hshop.honorfile.com/shopdc/pic/2022113/2/1b9e73d3-64ed-4619-8bb2-9ed82ae9f1c0.webp" alt="">
        </div>
        <div class="pic-wrap">
          <img src="https://hshop.honorfile.com/shopdc/pic/2022117/2/04752d36-098f-41a7-9234-d3d0f2a577e8.webp?https://hshop.honorfile.com/shopdc/pic/2022117/0/04752d36-098f-41a7-9234-d3d0f2a577e8.png" alt="">
        </div>
        <div class="pic-wrap">
          <img src="https://hshop.honorfile.com/shopdc/pic/2022113/2/3738b840-feb3-4920-8896-2a95742ece60.webp" alt="">
        </div>
    </div>
    <div class="birthday" id="bir1">
        <a href=""><img src="https://hshop.honorfile.com/shopdc/pic/2022117/0/3b769e02-8d20-4319-b4ae-c2ebb8444ddd.gif?https://hshop.honorfile.com/shopdc/pic/2022117/0/3b769e02-8d20-4319-b4ae-c2ebb8444ddd.gif" alt=""></a>
        <div class="pic-wrap">
          <img src="https://hshop.honorfile.com/shopdc/pic/2022113/2/40b8ff18-84be-4df9-8cac-5a51794c1004.webp?https://hshop.honorfile.com/shopdc/pic/2022113/0/40b8ff18-84be-4df9-8cac-5a51794c1004.png" alt="">
        </div>
        <div class="grid6">
           <ul>
           <a href="https://www.hihonor.com/cn/m/product/10086142227351.html#10086388894108" v-for="(v,index) in threelist" :key="index">
             <li >
              <img :src="v.src" alt="">
              <p class="sell">{{v.sell}}</p>
              <p class="name">{{v.name}}</p>
              <p class="price">{{v.price}}</p>
            </li>
           </a>
           </ul>
        </div>
    </div>
    <div class="sendgift" id="gif1">
        <a href=""><img src="https://hshop.honorfile.com/shopdc/pic/2022113/0/244988cb-f9c5-4f53-b408-e5d039e62918.gif?https://hshop.honorfile.com/shopdc/pic/2022113/0/244988cb-f9c5-4f53-b408-e5d039e62918.gif" alt=""></a>
        <div class="pic-wrap">
          <img src="https://hshop.honorfile.com/shopdc/pic/2022113/2/40b8ff18-84be-4df9-8cac-5a51794c1004.webp?https://hshop.honorfile.com/shopdc/pic/2022113/0/40b8ff18-84be-4df9-8cac-5a51794c1004.png" alt="">
        </div>
        <div class="grid6">
           <ul>
           <a href="https://www.hihonor.com/cn/m/product/10086142227351.html#10086388894108" v-for="(v,index) in threelist" :key="index">
             <li >
              <img :src="v.src" alt="">
              <p class="sell">{{v.sell}}</p>
              <p class="name">{{v.name}}</p>
              <p class="price">{{v.price}}</p>
            </li>
           </a>
           </ul>
        </div>
    </div>
    <div class="hotsell" id="sel1">
        <a href=""><img src="https://hshop.honorfile.com/shopdc/pic/2022113/2/6bd4a0d0-fc1f-41d2-9253-22d7d819f126.webp?https://hshop.honorfile.com/shopdc/pic/2022113/0/6bd4a0d0-fc1f-41d2-9253-22d7d819f126.png" alt=""></a>
        <div class="pic-wrap">
          <img src="https://hshop.honorfile.com/shopdc/pic/2022113/2/40b8ff18-84be-4df9-8cac-5a51794c1004.webp?https://hshop.honorfile.com/shopdc/pic/2022113/0/40b8ff18-84be-4df9-8cac-5a51794c1004.png" alt="">
        </div>
        <div class="grid6">
           <ul>
           <a href="https://www.hihonor.com/cn/m/product/10086142227351.html#10086388894108" v-for="(v,index) in threelist" :key="index">
             <li >
              <img :src="v.src" alt="">
              <p class="sell">{{v.sell}}</p>
              <p class="name">{{v.name}}</p>
              <p class="price">{{v.price}}</p>
            </li>
           </a>
           </ul>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            piclist:[],
            threelist:[]
        }
    },
    mounted(){
        this.$http({
            url:" http://localhost:3000/piclist",
            method:"GET"
        }).then((res)=>{
            this.piclist = res.data;
            console.log(res.data)
        }),

        this.$http({
            url:" http://localhost:3000/threelist",
            method:"GET"
        }).then((res)=>{
            this.threelist = res.data;
        })
    }
};
</script>

<style lang="scss" scoped>
.double-content {
  display: flex;
  background-color: rgb(255, 89, 0);
  flex-direction: column;
}

.double-nav {
  width: 23.45rem;
  height: 1.9531rem;
  background-color: #fff;
  position: sticky;
  top:0;
  z-index: 20;
}
.double-nav ul {
  margin: auto;
  display: flex;
  width: 90%;
  height: 100%;
  justify-content: space-between;
  align-items: center;
  color: rgb(255, 89, 0);
  font-size: 0.6rem;
}
.double-nav ul a{
  text-decoration: none;
  color: rgb(255, 89, 0);
}
.middle-img {
  width: 23.45rem;
  height: 6.9694rem;
}
.middle-img img {
  width: 100%;
  height: 100%;
}
.pic-list{
    width: 100%;
    height: 6.1844rem;
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    /* background-color: #39a9ed; */
   
  }
  .my-swipe .img-box{
     width: 4.8831rem;
    height: 4.8831rem;
  }
  .my-swipe{
    width: 100%;
    height: 100%;
  }
  .my-swipe img{
    width: 4.8831rem;
    height: 100%;
   }
   .bottom-img{
    width: 23.45rem;
   }
   .bottom-img img{
    width: 100%;
   }
   .doublue-middle-pic{
    width: 100%;
    height: 3.1406rem;
   }
   .doublue-middle-pic img{
    width: 100%;
    height: 100%;
   }
   .mobileMod19-coupons{
    display: flex;
    width: 100%;

   }
   .mobileMod19-coupons img{
    width: 100%;
   }
   .J_anchors,.pic-wrap{
    width: 100%;
   }
   .J_anchors img, .pic-wrap img{
    width: 100%;
   }
   .birthday,.hotsell, .sendgift{
    display: flex;
    flex-direction: column;
    flex: 1;
   }
   .birthday a,.sendgift a,.hotsell a{
    width: 100%;
    height: 4.4256rem;
   }
   .birthday a img,.hotsell a img,.sendgift a img{
    width: 100%;
   }
   .birthday .grid6,.hotsell .grid6,.sendgift .grid6{
    width: 100%;
    height: 25.1944rem;
   }
   .birthday .grid6 ul,.sendgift .grid6 ul,.hotsell .grid6 ul{
    margin: auto;
    width: 21.9rem;
    height: 100%;
    display: flex;
    /* flex-direction: row; */
    flex-wrap: wrap;
    height: 100%;
    justify-content: space-around;

   }
  .grid6 ul a {
    width: 30%;
    text-decoration: none;
    color: #000;
    margin-top: -0.3125rem;
   }
   .grid6 ul li{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    border-radius: .4125rem;
   }
   .grid6 ul li img{
    width: 4.3838rem;
    height: 4.3838rem;
   }
   .grid6 ul li .sell{
    width: 5.9894rem;
    height: .9969rem;
    background-color: #b12a2b;
    border-radius: .65rem;
    overflow: hidden;
    word-spacing: nowrap;
    text-overflow: ellipsis;
    font-size: .4333rem;
    line-height: .9969rem;
    color: #fff;
    text-align: center;
   }
   .grid6 ul li .name{
    padding-top: .1333rem;
    margin: 0 .3rem  0  .3rem;
    font-size: .6rem;
   }
   .grid6 ul li .price{
    font-size: .6rem;
    font-weight: 600;
    margin-left: .066rem;
   }
</style>